<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Prueba de JTable</title>


<link href="<c:url value="/resources/css/cupertino/jquery-ui-1.10.0.custom.css" />" rel="StyleSheet" type="text/css" />

<!--Archivos de script de JQuery-->
<script src="<c:url value="/resources/js/jquery-1.9.0.js" />" type="text/javascript"></script>
<script src="<c:url value="/resources/js/jquery-ui-1.10.0.custom.min.js" />" type="text/javascript"></script>

<!-- Cargar el plugin para manejor de tablas Jquery -->
<!-- CSS -->
<link href="<c:url value="/resources/js/jtable/themes/metro/blue/jtable.css" />" rel="stylesheet" type="text/css" />
<!-- JS -->
<script  src="<c:url value="/resources/js/jtable/jquery.jtable.js" />" type="text/javascript"></script>


<!-- 
<script  src="<c:url value="/resources/js/jquery-1.9.0.js" />" type="text/javascript"></script>
-->
<script type="text/javascript">
	$(document).ready(function() {
		//alert("Test de JQuery");
		

        //Crear una tabla a partir de la capa tblDatos
        $('#tblDatos').jtable({
            title: 'Catalogo de productos',
            actions: {
                listAction: '/productos/ListarProductos',
                createAction: 'productos/insertProductos',
                updateAction: 'productos/updateProductos',
                deleteAction: 'productos/deleteProductos'
            },
            fields: {
                idProducto: {
                    title: 'ID',
                    width: '5%'
                },
                id_tipoProducto: {
                    title: 'Categoria',
                    width: '10%'
                },
                nombre: {
                    title: 'Nombre producto',
                    width: '20%'
                },
                precio: {
                    title: 'Precio ($)',
                    width: '20%'
                },                
                descripcion: {
                    title: 'Descripcion',
                    width: '30%'
                },
                cantidad: {
                    title: 'Cantidad',
                    width: '15%'
                },
            }
        });


        $('#tblDatos').jtable('load');
        
	});
</script>
</head>
<body>
	<h1>Catalogo de productos</h1>

	<div id="tblDatos"></div>


</body>
</html>
